<template>
	<view>
		<view class="example-body">
			<uni-search-bar 
			      radius="100" 
				  bgColor="#EEEEEE" 
				  @confirm="search" 
				  :focus="true" 
				  v-model="searchValue" 
				  @blur="blur" 
				  @focus="focus" 
				  @input="input" 
				  @cancel="cancel"
				  @clear="clear">
			</uni-search-bar>
		</view>
		
		<uni-list v-for="(jet, index) in objet">
			<uni-list-item :title="jet.title" link  @click="onClick(jet.id)">
				<view slot="header" class="slot-box">
					<uni-tag text="Y323" size="small" type="success" inverted="true"> </uni-tag>
				</view>
			</uni-list-item>
		</uni-list>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				searchValue: '',
				objet: [
					{
					   title: '关于切实做好公路工作保洁工作的通知'	,
					   dateTime: '2021-05-12 12:55:32',
					   id: 32
					},
					{
					   title: '关于切实做好公路工作保洁工作的通知'	,
					   dateTime: '2021-05-12 12:55:32',
					   id: 32
					},
					{
					   title: '关于切实做好公路工作保洁工作的通知'	,
					   dateTime: '2021-05-12 12:55:32',
					   id: 32
					},
					{
					   title: '关于切实做好公路工作保洁工作的通知'	,
					   dateTime: '2021-05-12 12:55:32',
					   id: 32
					}
				]
			}
		},
		onLoad() {
				  
		},
		onPullDownRefresh() { //下拉刷新
		        setTimeout (() => {
					
		            uni.stopPullDownRefresh();
		        }, 1000);
		},
		methods: {
			onClick(id){ //跳转详情
				uni.navigateTo({
					url: '/pages/record/recordDetails'
				});
			},
			search(res) {
				uni.showToast({
					title: '搜索：' + res.value,
					icon: 'none'
				})
			},
			input(res) {
				console.log('----input:',res)
			},
			clear(res) {
				uni.showToast({
					title: 'clear事件，清除值为：' + res.value,
					icon: 'none'
				})
			},
			blur(res) {
				uni.showToast({
					title: 'blur事件，输入值为：' + res.value,
					icon: 'none'
				})
			},
			focus(e) {
				uni.showToast({
					title: 'focus事件，输出值为：' + e.value,
					icon: 'none'
				})
			},
			cancel(res) {
				uni.showToast({
					title: '点击取消，输入值为：' + res.value,
					icon: 'none'
				})
			}
		}
	}
</script>

<style>
	.slot-box {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
	}

</style>
